<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <style>
        body{
            margin:0;
            padding:0;
        }
        .cube{
            width: 800px;
            height: 400px;
            -webkit-perspective: 1000px;
            margin:200px auto 0 auto;
        }

        .ant{
            width: 100%;
            height: 100%;
            -webkit-transform-style: preserve-3d;
            -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);
            -webkit-animation:xuanzhuan 10s infinite linear;
        }

        .face{
            width: 100%;
            height: 100%;
            position: absolute;
            border:1px solid;
            -webkit-backface-visibility: hidden;
            /*background-color: #FFF;*/
            overflow: hidden;
            z-index: 10;
        }
        
        .nohidden{
            -webkit-backface-visibility: visible;
        }
        .face img{
            width: 100%;
            height: 100%;

        }

        .face-right{
            -webkit-transform: translate3d(400px , 0 , 0px) rotateY(-90deg);
        }
        .face-left{
            -webkit-transform: translate3d(-400px , 0 , 0px) rotateY(90deg);
        }
        .face-in{
            -webkit-transform: translate3d(0px , 0 , -400px) rotateY(0deg);
        }
        .face-out{
            -webkit-transform: translate3d(0px , 0 , 400px) rotateY(180deg);
        }
        .face-bottom{
            height: 800px;
            -webkit-transform: translate3d(0px , 0px , 0px) rotateX(90deg);
        }
        .face-top{
            height: 800px;
            -webkit-transform: translate3d(0px , -400px , 0px) rotateX(-90deg);
        }
        
        .house{
            position: absolute;
            height: 200px;
            z-index: 100;
        }
        .tv{
            -webkit-transform: translate3d(200px , 230px , 300px) rotateY(180deg);
        }
        .bed{
            height: 100px;
            -webkit-transform: translate3d(550px , 310px , 0px) rotateY(-90deg);
        }

        .house img{
            height: 100%;
        }

        @-webkit-keyframes xuanzhuan{
            from{
                -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);
            }
            to{
                -webkit-transform: translate3d(0,0,-200px) rotateY(360deg);
            }
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="cube">
        <div class="ant">
            <div class="face face-right"><img src="image/face-right.png" alt=""></div>
            <div class="face face-left"><img src="image/face-left.png" alt=""></div>
            <div class="face face-in"><img src="image/face-in.png" alt=""></div>
            <div class="face face-out"><img src="image/face-out.png" alt=""></div>
            <div class="face face-bottom"><img src="image/face-bottom.png" alt=""></div>
            <div class="face face-top"><img src="image/face-bottom.png" alt=""></div>

            <div class="face nohidden face-right"></div>
            <div class="face nohidden face-left"></div>
            <div class="face nohidden face-in"></div>
            <div class="face nohidden face-out"></div>

            <div class="house tv"><img src="image/tv.png" alt=""></div>
            <div class="house bed"><img src="image/bed.png" alt=""></div>
        </div>
    </div>
</body>
</html>